<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
</head>

<body>
    <section id="wrap">
        <h2 class="title">百度音乐榜单</h2>
        <ul id="list">
            <li>
                <input type="checkbox" checked="false" />
                <span>第一条信息</span>
                <a href="javascript:;" class="collect">收藏</a>
                <a href="javascript:;" class="cancelCollect">取消收藏</a>
                <a href="javascript:;" class="remove">删除</a>
            </li>
        </ul>
        <footer class="footer">
            <label><input type="checkbox" id="checkAll" />全选/全不选</label>
            <a href="javascript:;" id="remove">删除</a>
            <input type="text" id="newInfo" />
            <a href="javascript:;" id="add">添加</a>
        </footer>
    </section>
    <script>
        var data = [
            {
                id: 0,
                title: "残酷月光 - 费启鸣",
                checked: true,
                collect: true
            }, {
                id: 1,
                title: "兄弟 - 艾热",
                checked: true,
                collect: false
            }, {
                id: 2,
                title: "毕生 - 夏增祥",
                checked: false,
                collect: true
            }, {
                id: 3,
                title: "公子向北去 - 李春花",
                checked: false,
                collect: false
            }, {
                id: 4,
                title: "战场 - 沙漠五子",
                checked: true,
                collect: false //是否收藏 true 收藏 false 没有收藏
            }
        ];

        // 渲染函数，根据数据渲染视图
        let isCheckAll = data => data.every(item => item.checked)

        function renderDom(data) {
            let listEl = document.querySelector("#list")
            listEl.innerHTML = ""
            data.forEach((item, index) => {
                let liEl = document.createElement('li')
                liEl.innerHTML =
                    `
                <input type="checkbox" ${item.checked ? 'checked' : ''}/>
                <span>${item.title}</span>
                ${item.collect ? '<a href="javascript:;" class="collect">收藏</a>' : '<a href="javascript:;" class="cancelCollect">取消收藏</a>'}
                <a href="javascript:;" class="remove">删除</a>
                `


                liEl.onclick = function (e) {
                    // 点击了收藏
                    if (e.target.classList.contains('collect')) {
                        console.log('点击了收藏')
                        data[index].collect = false
                        console.log(data)

                        renderDom(data)
                    }
                    // 点击了取消收藏
                    if (e.target.classList.contains('cancelCollect')) {
                        console.log('点击了取消收藏')
                        data[index].collect = true
                        console.log(data)
                        renderDom(data)
                    }
                    // 点击了删除li
                    if (e.target.classList.contains("remove")) {
                        data.splice(index, 1)
                        renderDom(data)
                    }
                    // 点击checkbox事件,每次点击都检查数据是否都是true，如果是就触发全选
                    if (e.target.nodeName === "INPUT") {
                        data[index].checked = e.target.checked
                        document.querySelector('#checkAll').checked = isCheckAll(data)
                        renderDom(data)
                    }
                }

                listEl.appendChild(liEl)
            })
        }
        renderDom(data)

        // 全选 全不选
        document.querySelector('#checkAll').onclick = function () {
            data.forEach(item => {
                item.checked = this.checked
            })
            renderDom(data)
        }
        // 删除指定音乐
        document.querySelector("#remove").onclick = function () {
            data = data.filter(item => !item.checked)
            renderDom(data)
        }

        // 添加音乐
        let inputEle = document.querySelector("#newInfo");
        document.querySelector("#add").onclick = function () {
            let title = inputEle.value;
            // console.log(val);
            let obj = {
                id: data.length,
                title,
                checked: false,
                collect: false
            }

            data.push(obj);
            inputEle.value = "";
            renderDom(data);
        }




    </script>
</body>

</html>